<template>
  <div class="home">
    <a-input-search
      v-model:value="searchText"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    {{ JSON.stringify(searchParams) }}
    <!--    {{ JSON.stringify(postList) }}-->
    <MyDivider />

    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <PostList :postList="postList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserList :user-list="userList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import PostList from "@/components/PostList.vue";
import UserList from "@/components/UserList.vue";
import PictureList from "@/components/PictureList.vue";
import MyDivider from "@/components/MyDivider.vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import myAxios from "@/plugins/myAxios";
import { message } from "ant-design-vue";

const route = useRoute();
const router = useRouter();
const activeKey = route.params.category;

const postList = ref([]);
const userList = ref([]);
const pictureList = ref([]);
const searchText = ref(route.query.text);

const loadDataOld = (params: any) => {
  const postQuery = {
    ...params,
    searchText: params.text,
  };

  myAxios.post("post/list/page/vo", postQuery).then((res: any) => {
    postList.value = res.records;
  });

  const userQuery = {
    ...params,
    userName: params.text,
  };

  myAxios.post("user/list/page/vo", userQuery).then((res: any) => {
    userList.value = res.records;
  });

  const pictureQuery = {
    ...params,
    searchText: params.text,
  };
  myAxios.post("picture/list/page/vo", pictureQuery).then((res: any) => {
    pictureList.value = res.records;
  });
};

/**
 * 加载聚合数据
 * @param params
 */
const loadAllData = (params: any) => {
  const postQuery = {
    ...params,
    searchText: params.text,
  };

  myAxios.post("search/all", postQuery).then((res: any) => {
    postList.value = res.postList;
    userList.value = res.userList;
    pictureList.value = res.pictureList;
  });
};

const loadData = (params: any) => {
  const { type } = params;
  if (!type) {
    message.warn("类别为空,加载默认数据！");
    return;
  }

  const query = {
    ...params,
    searchText: params.text,
  };

  myAxios.post("search/all", query).then((res: any) => {
    if (type === "post") {
      postList.value = res.dataList;
    } else if (type === "user") {
      userList.value = res.dataList;
    } else if (type === "picture") {
      pictureList.value = res.dataList;
    } else {
      postList.value = res.postList;
      userList.value = res.userList;
      pictureList.value = res.pictureList;
    }
  });
};

const initSearchParams = {
  type: activeKey || "post",
  text: "鱼皮",
  pageSize: 15,
  pageNum: 1,
};

const searchParams = ref(initSearchParams);

// 首次请求
loadData(initSearchParams);

watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: (route.query.text as string) || initSearchParams.text,
    type: route.params.category || initSearchParams.type,
  };
  loadData(searchParams.value);
});

const onSearch = () => {
  router.push({
    query: {
      ...searchParams.value,
      text: searchText.value,
    },
  });
  loadData(searchParams.value);
};

const onTabChange = (key: string) => {
  router.push({
    path: `/${key}`,
    query: searchParams.value,
  });
  /* searchParams.value = {
     ...searchParams.value,
     type: key,
   };
   loadData(searchParams.value);*/
};
</script>
